<template>
    <div>
        <!--语法 v-on:事件名 = '方法名'
            @事件名 = 'methods里面的函数'
            @事件名 = 'methods里面的函数(实参参数)'
        -->
        <p>超市购物：购买商品的数量：{{ count }}</p>
        <button v-on:click="count= count + 1">增加1个数量</button> &nbsp;
        <button v-on:click="addFn">增加1个商品</button>
         <button v-on:click="count = count + 5">增加5个数量</button> &nbsp;
          <button v-on:click="addCount(5)">增加5个商品</button> &nbsp;
          <hr>
          <!--阻止某些动作 v-on事件-->
          <a v-on:click="one" href="https://www.baidu.com">阻止去百度</a>
          <a @click="two(10,$event)" href="https://www.sina.com">阻止去新浪</a>
          <hr>
          <!--动态更改样式的定义名 id改成class-->
          <span v-bind:[attributeName]="id">动态改变样式</span>
          <button @click="attributeName = 'class'">动态改变class选择器</button>
          <!--鼠标点击事件-->
          <button @[MouseEvent]="attributeName = 'class'">改变属性</button>
          <!--默认事件
           stop 阻止冒泡事件
            prevent 阻止默认事件
            once 只能触发一次事件
        -->
        <div @click="myFn">
            <button @click.stop="btn">点击事件要阻止事件冒泡</button>
            <a href="https://www.taobao.com" @click.prevent="btn">点击事件要阻止默认事件</a>
            <button @click.once="btn">程序执行一次</button>
        </div>
        <!--按键修饰符-->
        <!--点击按钮实现字符串翻转 vue hello    olleh euv-->
    </div>
</template>
<script>
export default {
    data() { 
        return {
            //语法 v-bind:属性名 = '变量'
            //简写 :属性名 = '变量'   也叫语法糖
            count: 0,
            id: 'd1',
            attributeName: 'id',
            MouseEvent:'click'
        }
    },
    methods: {
        addFn() { 
            this.count++;
        },
        addCount(num) { 
            this.count += num
        },
        one(e) { 
            e.preventDefault();
        },
        two(num, e) {
            console.log(num); //打印的意思
            e.preventDefault();
        },
        myFn() { 
            console.log("外层函数触发");
        },
        btn() { 
            console.log("内层函数触发");
        }
    }
}
</script>
<style scoped>
   .d1{
    color: red;
    font-size: 20px;
   }
</style>